/* global React */
// Round Builder — "fluid within rails". Strategy stays LOCKED; drivers freely set
// TWO independent options — the Sprint car pool and the Feature car — plus the shared
// track and lap count. Every choice is validated against the guardrails before it
// hits the ballot.
function RoundBuilderScreen() {
const { Card, Select, Button, Badge, RangeMeter, VoteOption } = window.GT7LeagueDesignSystem_258437;
const D = window.GT7DATA;
const R = D.rails;
const [track, setTrack] = React.useState(D.tracks[2].name);
// --- Sprint option (broader pool of similar-performance cars) ---
const [sKlass, setSKlass] = React.useState('Road');
const [sMin, setSMin] = React.useState(580);
const [sMax, setSMax] = React.useState(620);
const [pool, setPool] = React.useState(['Porsche Cayman GT4 \u201916', 'Toyota Supra RZ \u201997', 'BMW M4 \u201914']);
// --- Feature option (a specific car + laps) ---
const [fKlass, setFKlass] = React.useState('Road');
const [fMin, setFMin] = React.useState(580);
const [fMax, setFMax] = React.useState(620);
const [featureCar, setFeatureCar] = React.useState('Porsche Cayman GT4 \u201916');
const [laps, setLaps] = React.useState(18);
const [ballot, setBallot] = React.useState([]);
const [fedFrom, setFedFrom] = React.useState(null);
// Auto-feed from the vote: winning sprint pool + feature car pre-fill this round.
React.useEffect(() => {
const apply = () => {
const v = window.GT7VOTE || {};
if (v.sprint && v.sprint.build) { const b = v.sprint.build; setSKlass(b.klass); setSMin(b.min); setSMax(b.max); setPool(b.pool); }
if (v.feature && v.feature.build) { const b = v.feature.build; setTrack(b.track); setFKlass(b.klass); setFMin(b.min); setFMax(b.max); setFeatureCar(b.car); setLaps(b.laps); }
if (v.sprint || v.feature) setFedFrom({ sprint: v.sprint && v.sprint.label, feature: v.feature && v.feature.label });
};
apply();
window.addEventListener('gt7-vote', apply);
return () => window.removeEventListener('gt7-vote', apply);
}, []); // eslint-disable-line
const sGr = sKlass !== 'Road';
const fGr = fKlass !== 'Road';
const trackObj = D.tracks.find(t => t.name === track);
const lapTimeSec = trackObj ? trackObj.km * 30 : 100;
const estMin = Math.round((laps * lapTimeSec) / 60);
const timeOk = estMin >= R.featureTimeTarget.min && estMin <= R.featureTimeTarget.max;
const autoLaps = () => setLaps(Math.max(1, Math.round((27.5 * 60) / lapTimeSec)));
const sprintEligible = D.carPool.filter(c => c.klass === sKlass && (sGr || (c.pp >= sMin && c.pp <= sMax)));
const featureEligible = D.carPool.filter(c => c.klass === fKlass && (fGr || (c.pp >= fMin && c.pp <= fMax)));
const inPool = sprintEligible.filter(c => pool.includes(c.name));
const avgPP = inPool.length ? Math.round(inPool.reduce((a, c) => a + c.pp, 0) / inPool.length) : sMin;
const togglePool = (name) => setPool(p => p.includes(name) ? p.filter(n => n !== name) : [...p, name]);
// keep feature car valid within the feature window
React.useEffect(() => {
if (!featureEligible.some(c => c.name === featureCar)) setFeatureCar(featureEligible[0] ? featureEligible[0].name : '');
}, [fKlass, fMin, fMax]); // eslint-disable-line
const issues = [];
if (!track) issues.push('Pick a track');
if (inPool.length < 3) issues.push('Sprint pool needs 3+ cars');
if (!featureCar) issues.push('Choose a feature car (widen the feature window if empty)');
if (!timeOk) issues.push(`Feature time ${estMin} min — target ${R.featureTimeTarget.min}–${R.featureTimeTarget.max}`);
const valid = issues.length === 0;
const submit = () => {
if (!valid) return;
setBallot(b => [...b, {
id: 'b' + Date.now(),
title: track,
meta: `Sprint: ${sKlass}${sGr ? ' BoP' : ` ${sMin}–${sMax}`} · ${inPool.length} cars | Feature: ${featureCar} · ${laps} laps (~${estMin} min)`,
votes: 0,
}]);
};
return (
{/* LOCKED RAILS */}
Locked strategy
Fixed
{/* FLUID CHOICES */}
{fedFrom && (
From the vote
Pre-filled the winning options — Sprint: {fedFrom.sprint || '—'} · Feature: {fedFrom.feature || '—'}. Adjust anything below before submitting.
)}
{/* Shared track */}
Track — shared by both races
{/* SPRINT OPTION */}
Car pool — tick the cars allowed
= 3 ? 'var(--green-400)' : 'var(--amber-400)' }}>{inPool.length} selected
{/* FEATURE OPTION */}
Feature car
{/* Validation + submit */}
{valid ? (
OK Both options within strategy — ready for the ballot
) : (
<>
Fix before submitting
{issues.map((x, i) => - {x}
)}
)}
{ballot.length > 0 && (
On the ballot ({ballot.length})
{ballot.map(b => )}
)}
);
}
function ClassWindow({ klass, setKlass, min, setMin, max, setMax, avgPP }) {
const { Badge, RangeMeter } = window.GT7LeagueDesignSystem_258437;
const isGr = klass !== 'Road';
return (
Class
Performance window
{isGr ? (
BoP on
Balance of Performance equalizes the field — no PP tuning.
) : (
Min setMin(Math.min(v, max - 10))} step={5} lo={400} hi={700} />
Max setMax(Math.max(v, min + 10))} step={5} lo={410} hi={720} />
{avgPP != null && (
)}
)}
);
}
function CarChecklist({ eligible, pool, toggle }) {
if (eligible.length === 0) return No cars fit this window. Widen the PP range.
;
return (
{eligible.map(c => {
const on = pool.includes(c.name);
return (
);
})}
);
}
function SectionTag({ n, label, hint }) {
return (
{n}
{label}
· {hint}
);
}
function Stepper({ value, set, step = 1, lo, hi }) {
return (
set(Math.max(lo, value - step))}>–
{value}
set(Math.min(hi, value + step))}>+
);
}
function StepBtn({ children, onClick }) {
return ;
}
function FieldLabel({ children }) {
return {children}
;
}
function RailGroup({ label, items, tone }) {
const { Badge } = window.GT7LeagueDesignSystem_258437;
return (
{label}
{items.map((x, i) => {x})}
);
}
function Segmented({ options, value, onChange }) {
return (
{options.map(o => {
const on = o === value;
return (
);
})}
);
}
window.RoundBuilderScreen = RoundBuilderScreen;